
.myuserface{

    width: 100%;
    height: 150px;
    /*background-color: red;*/
}

.editBox{

    width: 28px;
    height: 28px;
    /*background-color: red;*/
    position: absolute;
    left: 100%;
    margin-left: -50px;
}

.editBox img{

    width: 28px;
    height: 28px;

}

.edithpel{

    width: 26%;
    height: calc(100% - 80px);
    background-color: rgba(120,0,0,0.5);
    /*position: relative;*/
    margin-left: 26%;

}

.myuserface img:active{

    opacity: 0.6;
}

.myuserface .img{

    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid white;
    position: relative;
    left: 50%;
    margin-left: -30px;
    margin-top: 4px;
}

.myuserface .fname{

    color: white;
    font-size: 0.8rem;
    text-align: center;
}

.myuserface .classfly{

    width: 100%;
    display: flex;
    height: 30px;
    /*background-color: yellowgreen;*/
}
.myuserface .classfly .citem{

    width: 50%;
    height: 100%;
    display: flex;
    /*background-color: aqua;*/

}

.citem .lv{

    width: 24px;
    height: 24px;
    margin-left: 64px;

}

.citem .lv1{

    width: 24px;
    height: 24px;
    margin-left: 24px;

}

.citem .txt{

    margin-left: 12px;
    padding-top: 2px;
    color: white;
    font-size: 0.8rem;
}

.moreset{

    width: 90%;
    margin-left: 5%;
    height: calc(100% - 160px - 380px);
    /*background-color: yellowgreen;*/
}

.moreset .moreheaderface{

    width: 100%;
    height: 50px;
    /*background-color: red;*/


}

.moreset .moreheaderface .itemface{

    width: 50px;
    height: 100%;
    /*background-color: yellow;*/
    float: left;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 2px;
}

.moreset .moreheaderface .itemface img{

    width: 100%;
    height: 100%;

}
 .inputBoxs{


    width: 100%;
    height: 150px;
    /*background-color: red;*/
}

 .inputBoxs textarea{

     margin-top: 12px;
     width: 86%;
     height: 80px;
     margin-left: 6%;
     /*margin-top: 4px;*/
     border-radius: 4px;
     outline: none;
     padding:6px;
     font-size: 0.8rem;
     background-color: rgba(0,0,0,0);
     color: white;
 }

 .inputBoxs #senfBtn{

     width: 60px;
     margin-top: 8px;
     height: 28px;
     border-radius: 4px;
     /*background-color: #00B7FF;*/
     position: relative;
     border: 2px solid white;
     left: 100%;
     margin-left: -90px;

 }

 #senfBtn:active{

     opacity: 0.6;
 }

 #senfBtn p{

     color: white;
     text-align: center;
     padding-top: 4px;
     font-size: 0.8rem;
 }
 #emjss:active{

     opacity: 0.6;
 }

 .emj{

     margin-top: 20px;
     width: 86%;
     height: 180px;
     margin-left: 6%;
     /*background-color: red;*/
 }

 .emj .itememj{

     width: 10%;
     height: 30px;
     /*background-color: yellow;*/
     float: left;
     font-size: 1.2rem;
     text-align: center;
 }

 .emj .itememj p{

     text-align: center;
 }

 .selectEmj{

     width: 86%;
     height: 30px;
     /*background-color: yellow;*/
     margin-left: 6%;
     margin-top: 4px;
     display: flex;

 }

 .selectEmj .bef{

     width: 24px;
     margin-right: 6px;
     height: 24px;
     /*background-color: white;*/
     border-radius: 50%;

 }

.selectEmj .bef:active{

    opacity: 0.6;
}

.selectEmj .bef img{

    width: 24px;
    height: 24px;


}
.selectEmj .befs{

    margin-left: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.selectEmj .befs img{

    width: 24px;
    height: 24px;
}
.selectEmj .befs:active{
    opacity: 0.6;
}

.aboutme {

    width: auto;
    /*margin-left: 6%;*/
    height: 120px;
    /*background-color: yellow;*/
    position: absolute;
    /*float: left;*/
    margin-top: 80px;
    transition: all ease-out 0.4s;
}

.aboutme .imggg{

    margin-left: 8px;
    height: 60%;
    float: right;
    transition: all ease-in 0.6s;
    cursor: pointer;
}

.aboutme img:hover{

    transform: rotate(360deg);

}

.cat{

    width: 100%;
    /*height: 10px;*/
    height: 110px;
    /*background-color: red;*/
    overflow: hidden;
}

.cat img{

    margin-top: 60px;
    margin-left: 40px;
    height: 60px

}

#addf:active{

    opacity: 0.6;
}

.toLogi{

    margin-top: 24px;
    padding-left: 4px;
    padding-right:4px;
    color: white;
    width: 66%;
    height: 36px;
    background-color: rgba(0,0,0,0);
    outline: none;
    display: block;
    margin-bottom: 12px;
    border-radius: 4px;
    position: relative;
    left: 50%;
    margin-left: -33%;
}

.loginbtn{


    width: 56px;
    height: 28px;
    border: 2px solid white;
    border-radius: 4px;
    /*position: relative;*/
    /*left: 100%;*/
    /*margin-top: 24px;*/
    float: right;
    /*margin-left: -120px;*/
    cursor: pointer;
}

.loginbtn:active{

    opacity: 0.6;
}

.tip{

    width: 86%;
    margin-left: 6%;
    /*height: 200px;*/
    /*background-color: red;*/
    margin-top: 12px;
    /*border: 1px solid white;*/
    border-radius: 4px;
    max-height: 0px;
    overflow: hidden;
    color: white;
    padding: 4px;
    font-size: 0.8rem;
    transition: all ease-out 0.4s;


}
#tipBtn{

    width: 26px;
}
#tipBtn:active{

    opacity: 0.6;
}